<script lang="ts" setup>
withDefaults(defineProps<{ data?: any; title?: string; cols?: number }>(), {
  cols: 3,
});
const slots = defineSlots();
</script>

<template>
  <div class="umrp-descriptions">
    <umrp-text :size="16" v-if="title" bold>{{ title }}</umrp-text>
    <umrp-grid :cols="cols" :row-gap="10" :col-gap="10">
      <umrp-grid-item v-for="component in slots.default()">
        <component :is="component" />
      </umrp-grid-item>
    </umrp-grid>
  </div>
</template>

<style lang="scss" scoped>
.umrp-descriptions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>
